<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品列表</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/3.css"/>
</head>
<body>
<div class="page-header">
    <h1>商品列表</h1>
    <h2 id="itemInfo" style="color: red"></h2>
</div>
<form id="form" action="${pageContext.request.contextPath}/item/list" method="get">
    <table class="table table-hover">
        <tr>
            <th class="active">
                <span style="font-size: 26px;">商品名称:</span>
            </th>
            <td class="warning">
                <input type="text" id="name" name="name" class="form-control" placeholder="商品名称" value="${oldname}"/>
            </td>
            <td class="info">
                <button type="submit" class="btn btn-success" >查询</button>
            </td>
            <td class="danger">
                <button type="button" class="btn btn-info" onclick="insert()">添加商品</button>
            </td>
        </tr>
    </table>
</form>
<table class="table">
	<tr class="info">
		<td colspan="7">商品列表:</td>
	</tr>
	<tr class="active">
		<th>商品名称</th>
		<th>商品价格</th>
		<th>生产日期</th>
		<th>商品描述</th>
		<th>展示图片</th>
		<th>操作</th>
	</tr>
	<c:forEach items="${pageInfo.list}" var="item">
		<tr class="success">
			<td style="width:20%;">
				${item.name }
			</td>
			<td>
				${item.price }
			</td>
			<td>
				<fmt:formatDate value="${item.productionDate }" pattern="yyyy-MM-dd"/>
			</td>
			<td style="width:40%;">${item.description }</td>
			<td>
				<img src="${item.pic }" style="width:80px;height:80px;" />
			</td>
			<td>
				<button type="button" class="btn btn-warning" onclick="up(${item.id})">修改</button>
				<button type="button" class="btn btn-warning" onclick="del(this,${item.id})">删除</button>
			</td>
		</tr>
	</c:forEach>
</table>
<div id="page">
    <span style="font-size: 20px;">当前第 ${pageInfo.pageNum} 页 / 共 ${pageInfo.pages} 页  (${pageInfo.total}条)</span>
    <div style="float: right;">
		<c:if test="${pageInfo.hasPreviousPage}">
			<button class="btn btn-warning" onclick="skipPage(1)">首页</button>
			<button class="btn btn-warning" onclick="skipPage(${pageInfo.pageNum-1})">上一页</button>
		</c:if>
		<c:if test="${pageInfo.hasNextPage}">
			<button class="btn btn-warning" onclick="skipPage(${pageInfo.pageNum+1})">下一页</button>
			<button class="btn btn-warning" onclick="skipPage(${pageInfo.pages})">尾页</button>
		</c:if>
    </div>
</div>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script type="text/javascript">
    //分页展示
	function skipPage(page) {
		location.href="${pageContext.request.contextPath}/item/list?page="+page+"&size="+${pageInfo.pageSize}+"&name="+$("#name").val();
	}
	//添加
	function insert() {
		location.href="${pageContext.request.contextPath}/item/add-ui"
	}
	//删除
	function del(obj, id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/item/del/"+id,
            data:null,
            type:"DELETE",
            dataType:"json",
            success:function (result) {
                if (result.code==0){
                    $(obj).parent().parent().remove()
                }else {
                    $("#itemInfo").html(result.msg)
                }

            },
            error:function () {
				alert("服务器爆炸了")
            }

        })
    }

    //修改
	function up(id) {
        location.href="${pageContext.request.contextPath}/item/up-ui?id="+id;
	}
</script>
</html>